Skip to content

chore: make plugin tabs scrollable#3054

Merged
moshloop merged 5 commits into
mainfrom
plug-tab
Jul 2, 2026
Merged

chore: make plugin tabs scrollable#3054
moshloop merged 5 commits into
mainfrom
plug-tab

Conversation

@yashmehrotra

@yashmehrotra yashmehrotra commented Jun 30, 2026

Copy link
Copy Markdown
Member

Summary by CodeRabbit

  • New Features

    • Configuration tabs now support an overflow “More” menu for better usability on smaller screens.
    • Plugin-provided tabs are now shown directly in the main configuration tab bar alongside built-in tabs.
  • Bug Fixes

    • Active tab highlighting now stays in sync with the current URL, including when tabs are accessed via the overflow “More” menu.
  • Chores

    • Simplified the configuration tabs setup by removing an obsolete dropdown-based plugin tab component.

@vercel

vercel Bot commented Jun 30, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
aws-preview Ready Ready Preview Jul 2, 2026 6:03am
flanksource-ui Ready Ready Preview Jul 2, 2026 6:03am

Request Review

@coderabbitai

coderabbitai Bot commented Jun 30, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 6a63b66a-bee8-43c7-a4a2-b3de896a1a71

📥 Commits

Reviewing files that changed from the base of the PR and between b4f0f8f and 3f3823e.

📒 Files selected for processing (1)
  • src/ui/Tabs/TabbedLinks.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • src/ui/Tabs/TabbedLinks.tsx

Walkthrough

Plugin tabs are now loaded inline with config tabs, and the tab bar can collapse excess tabs into a “More” dropdown. ConfigDetailsTabs switches to the new overflow mode, and the standalone plugins dropdown is removed.

Changes

Plugin tabs inlined + overflow tab bar

Layer / File(s) Summary
Overflow-capable tab bar
src/ui/Tabs/TabbedLinks.tsx
Adds overflowMenu support, measures tab widths, renders visible tabs plus a dropdown for overflow items, and updates active-state handling for overflowed tabs.
Plugin tabs loaded into config tab list
src/components/Configs/ConfigTabsLinks.tsx
Fetches plugins for the current config, converts their tabs into config tab entries, and appends them after view and static tabs.
ConfigDetailsTabs uses overflow mode
src/components/Configs/ConfigDetailsTabs.tsx
Removes the plugins dropdown import and switches TabbedLinks from extraTabs to overflowMenu.
🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title is concise and relevant, capturing the main UX change of making plugin tabs overflow into a scrollable/compact menu.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch plug-tab
✨ Simplify code
  • Create PR with simplified code
  • Commit simplified code in branch plug-tab

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@yashmehrotra

Copy link
Copy Markdown
Member Author
image

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/ui/Tabs/TabbedLinks.tsx`:
- Around line 157-159: The active-tab check in TabbedLinks is treating missing
keys as a match because activeTabName and TabLink.key are both optional, so
guard the activeTabName === key comparison against undefined before using it in
isOverflowActive and the other tab selection checks. Update the matching logic
in TabbedLinks to only compare keys when both values are present, while still
allowing pathname-based matching for tabs without keys, including the overflow
trigger and overflow items.
- Around line 87-96: Allow zero visible tabs in TabbedLinks when only the
overflow trigger fits, instead of forcing at least one tab visible. Update the
visible-count calculation in the loop that uses widths, available, and
triggerWidthRef.current so setVisibleCount can receive 0 when the first tab plus
the trigger exceeds the container, ensuring the “More” trigger remains reachable
under overflow-hidden.
- Around line 196-199: The overflow trigger in TabbedLinks should retain a
visible keyboard focus indicator instead of suppressing it with
focus:outline-none. Update the className composition for the “More” control in
TabbedLinks so it still has a clear focus style when tabbed to, using the
existing tabClassName/overflowMenu path as the place to add or restore the focus
state.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: ccaccac6-4a8e-4e16-bc02-6e510438cc7f

📥 Commits

Reviewing files that changed from the base of the PR and between 5f646f6 and b4f0f8f.

📒 Files selected for processing (2)
  • src/components/Configs/ConfigDetailsTabs.tsx
  • src/ui/Tabs/TabbedLinks.tsx

Comment thread src/ui/Tabs/TabbedLinks.tsx Outdated
Comment thread src/ui/Tabs/TabbedLinks.tsx
Comment thread src/ui/Tabs/TabbedLinks.tsx
@coderabbitai

coderabbitai Bot commented Jul 2, 2026

Copy link
Copy Markdown
Contributor

Caution

Failed to replace (edit) comment. This is likely due to insufficient permissions or the comment being deleted.

Error details
{}

@moshloop moshloop merged commit 05e66ab into main Jul 2, 2026
16 of 18 checks passed
@moshloop moshloop deleted the plug-tab branch July 2, 2026 07:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants